import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
  useEffect,
} from "react";
import PropType from "prop-types";
import "./Home.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
 import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; //模型解压缩

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; //模型加载器
//  import Stats from 'three/examples/jsm/libs/stats.module.js';//性能监控
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
const width = window.innerWidth
const height =window.innerHeight

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
renderer.setSize(width, height); // canvas 大小设置
renderer.outputEncoding = THREE.sRGBEncoding; //定义渲染器的输出编码

const pmremGenerator = new THREE.PMREMGenerator( renderer );
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xbfe3dd );// 场景颜色
scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 100 );
camera.position.set( 5, 2, 8 );


const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 阻尼开启
controls.enablePan = false; //启用或禁用摄像机平移，默认为true。
controls.maxDistance = 9; //你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity。
controls.target.set(0, 0.5, 0);


const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("../draco/"); //压缩的几何体加载程序【这个要注意，这个是threeJS 的坑，这个压缩的glb 模型，需要这个加载，否则报错。而这个玩意是node_modules three 里面，这个又拿不到，所以把它复制到public中】

//  性能状态监视
const stats =new Stats();
stats.dom.style.position='absolute'
stats.dom.style.top='absolute'

const loader = new GLTFLoader(); //加载器
loader.setDRACOLoader(dracoLoader); //用于解码使用KHR_draco_mesh_compression扩展压缩过的文件。

const clock = new THREE.Clock();

const container = document.createElement("div");
document.body.appendChild(container);

container.appendChild( stats.dom );
let mixer:any;
const ReactDemo = () => {
 
  


  useEffect(() => {
    init();
   
    return 
  },[]);
  function init() {
  
    loader.load("./3D/LittlestTokyo.glb", function (gltf) {
     
      
      const model = gltf.scene;
			model.position.set( 1, 1, 0 );
		  model.scale.set( 0.01, 0.01, 0.01 );
			scene.add( model );
      if(scene.children && scene.children.length ===2){
        // react  开发环境下会自动连续加载两次，导致小汽车重叠。所以删除一个场景
        scene.children.splice(0, 1)　
      }
       console.log(gltf,model)
    
      mixer = new THREE.AnimationMixer( model );
			mixer.clipAction( gltf.animations[ 0 ] ).play(); //说明: 不要直接调用这个构造函数，而应该先用AnimationMixer.clipAction实例化一个AnimationAction，因为这个方法提供了缓存以提高性能。
      animate();
    });

   
    
    
    container.appendChild(renderer.domElement); // 把canvas 添加到 到div 中

    window.addEventListener("resize", onWindowResize);
  }

  function onWindowResize() {
    camera.aspect = width /height;
    camera.updateProjectionMatrix();

    renderer.setSize(width,height);
  }

  //

  function animate() {
    
    renderer.setAnimationLoop( animate );
  
    const delta = clock.getDelta();	
    mixer.update( delta );
    renderer.render(scene, camera);
    stats.update() // 性能监测需要 循环调用这个函数
    controls.update();
  }
  return (
    <>
  
    </>
  );
};

export default ReactDemo;
